<template>
  <!--vue模板里面所有的内容要被一个根节点包含起来-->
  <div id="app">
    <!-- 绑定数据 -->
    <h2>{{msg}}</h2>
    <br>
        <!-- 绑定数据的另一种方法 -->
        <h2 v-text="msg"></h2> 

    <h3>{{obj.name}}</h3>
    <br>

    <ul>
      <li v-for="item in list">
          {{item}}
      </li>
    </ul>

    <ul>
      <li v-for="item in list1">
        {{item.title}}
      </li>
    </ul>

    <ul>
      <li v-for="item in list2">
        {{item.cate}}
        <ol>
          <li v-for="news in item.list">
            {{news.content}}
          </li>
        </ol> 
      </li>
    </ul>

  <!-- 绑定属性 -->
  <div v-bind:title="title">Some Content</div><br>
  <img src="http://s1.cn.bing.net/th?id=OJ.ME7t1Hv5RG748g&pid=MSNJVFeeds" alt="Commet"><br>
  <img v-bind:src="url" alt=""><br>
  <img :src="url2" alt="">

  <!-- 绑定html -->
  <div v-html="h"></div>

  <!-- 绑定样式 -->
    <!-- v-bind:class -->
  <div v-bind:class="{'red':flag}">我是一个div</div>
  <div :class="{'blue':!flag}">我是一个div</div>

  <ul>
    <li v-for="(item,key) in list" :class="{'red':key==0,'blue':key==1}">
      {{key}}---{{item}}
    </li>
  </ul>
    <!-- v-bind:style 可以动态绑定样式-->
  <div class="box" v-bind:style="{'width':boxWitdh+'px'}">
      我是div1 BOX
  </div>
  <br>
   <div class="box" :style="{'width':boxWitdh+'px'}">
      我是div2 BOX
  </div>
  <br>

<!-- 双向数据绑定 -->
<h2>{{msg}}</h2>
<input type="text" v-model="msg">    <!--model-->
<button v-on:click="getMsg()">获取表单里的数据get</button>   <!--view-->
<button v-on:click="setMsg()">设置表单里的数据set</button>   <!--view-->    
<br><hr>
    <!-- 使用ref操作dom节点 -->
<input type="text" ref="userinfo">
<button v-on:click="getInputValue()">获取第二个表单里的数据</button>   <!--view-->    

<div ref="box">I'm a box</div>


<!-- vue事件 -->
<button v-on:click="run1()">执行方法的第一种写法</button><br>
<button @click="run2()">执行方法的第二种写法</button><br>
<h6>{{msg}}</h6>
<button @click="getMsg()">获取data里的msg</button>
<button @click="setMsg()">改变data里的msg</button><br>
<button @click="requestData()">请求数据</button><br>
<ul>
  <li v-for="item in listEmpty">{{item}}</li>
</ul>
<br><br>

<ul>
  <li v-for="(item,key) in list">{{key}}---{{item}}</li>
</ul>
<button @click="deleteData('111')">执行方法传值</button>
  <!-- 事件对象 -->
<button data-aide='123' @click="eventFn($event)">事件对象</button>   <!--must begin with data- -->


  </div>
</template> 

<script>
export default {
  name: 'app',
  data () {
    return {
      // 绑定数据
      msg: 'Bienvenue a Vue.js App',
      
      obj:{
        name:"张三"
      },

      list:['111','222','333'],

      list1:[
        {'title':'1111'},
        {'title':'2222'},
        {'title':'3333'}
      ],

      list2:[
        {
          "cate":"Headlines",
          "list":[
            {'content':'News 1'},
            {'content':'News 2'}
          ]
        },
        {
          "cate":"International News",
          "list":[
            {'content':'News 1'},
            {'content':'News 2'}
          ]
        }
      ],

      listEmpty:[],

      // 绑定属性
      title:"I'm a title",
      url:"http://s3.cn.bing.net/th?id=OJ.CiHzqRHueip1Mg&pid=MSNJVFeeds",
      url2:"http://s1.cn.bing.net/th?id=OJ.toBCWpwBOAyx0Q&pid=MSNJVFeeds",
      
      // 绑定html
      h:'<h2>我是html<h2>',

      flag:true,

      boxWitdh: 300

      // 双向数据绑定 MVVM  model <-> view  必须在表单里使用

    }
  },
  methods:{
    getMsg(){
      alert(this.msg);

    },
    setMsg(){ 
      this.msg="我是改变后的数据";
    },
    getInputValue(){
      // 获取ref定义的dom节点
      console.log(this.$refs.userinfo);
      alert(this.$refs.userinfo.value);

      this.$refs.box.style.background='red'; 

    },
    // vue事件
    run1:function(){
      alert('这是一个方法');
    },
    run2(){   //ES6简写
      alert('这是第二个方法');
    },
    requestData(){
      for(var i=0;i<10;i++){
        this.listEmpty.push('我是第'+i+'条数据');
      }
    },
    deleteData(val){
      alert(val);
    },
    eventFn(e){
      console.log(e);
      console.log(e.srcElement.dataset.aide);
      e.srcElement.style.background='red';
    }
  }
  
}
</script>

<style>
   /* 绑定样式 */
  .red{
    color: darkgoldenrod
  }

  .blue{
    color:chartreuse
  }

  .box{
    height: 100px;
    width: 100px;
    background: rebeccapurple;
  }
</style>
